<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Twip Test Page</title>
<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var url= 'statuses/friends_timeline.json';
    var params = {
        count: 5
    };

    $('#msg').ajaxStart(function() {
        $(this).empty();
        $(this).append("Loading...");
        $('#msg').css({color:"blue", fontSize:"24px"});
    });

    $.getJSON(url, params, function (json) {
        $('#content').empty();
        $.each(json, function(index, status) {
            var row=$('<tr />');

            var userTd=$('<td />');
            userTd.attr({align : 'center'});
            
            var imgDiv=$('<div />');
            var img=$('<img />');
            img.attr({src: status.user.profile_image_url, width: '48', height: '48'});
            imgDiv.append(img);

            var nameDiv=$('<div />');
            nameDiv.append(status.user.screen_name);

            userTd.append(imgDiv).append(nameDiv);
            
            var textTd=$('<td />');
            textTd.append(status.text);

            var timeTd=$('<td />');
            timeTd.attr({width: '15%'});
            var date=new Date(status.created_at);
            var dateStr=date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes();
            timeTd.append(dateStr);

            row.append(userTd).append(textTd).append(timeTd);

            $('#content').append(row);
        });
        
        //$('#content').append(content_inner_html);
        
        $('#msg').empty();
        $('#msg').append("Ok!");
        $('#msg').css({color:"green", fontWeight:"bold", fontSize:"24px"});
    });

    $('#msg').ajaxError(function() {
        $(this).empty();
        $(this).append("Failed!"); 
        $('#msg').css({color:"red", fontWeight:"bold", fontSize:"24px"});
    });
});

</script>
</head>
<body>
<h1>Twip Test Page</h1>
<p>Get the latest 5 statuses in your friend time line</p>
<p>Input your twitter username and password in the popup dialog</p>
<div id="msg"></div>
<table id="content" border="1" width="100%"></table>
</body>
</html>
